package com.kt.app.ui.components


import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountBox
import androidx.compose.material3.Checkbox
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet

@Composable
fun ConstraintLayoutSample2() {
    var checked by remember { mutableStateOf(false) }

    val constraints = ConstraintSet {
        val icon = createRefFor("icon")
        val mainText = createRefFor("mainText")
        val subText = createRefFor("subText")
        val checkbox = createRefFor("checkbox")
        constrain(icon){
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            start.linkTo(parent.start,10.dp)
        }

        constrain(mainText){
            start.linkTo(icon.end,20.dp)
            top.linkTo(parent.top,30.dp)
        }

        constrain(subText){
            start.linkTo(icon.end,20.dp)
            top.linkTo(mainText.top,20.dp)
        }
        constrain(checkbox){
            centerVerticallyTo(parent)
            end.linkTo(parent.end,20.dp)
        }

    }

    ConstraintLayout(
        constraintSet = constraints,
        modifier= Modifier.fillMaxWidth().height(80.dp).background(Color.Yellow),

        ) {
        // 创建引用
        //使用 createRefs() 或 createRefFor() 为 ConstraintLayout 中的每个可组合项创建引用。
        //约束条件是使用 constrainAs() 修饰符提供的，该修饰符将引用作为参数，可让您在主体 lambda 中指定其约束条件。
        //约束条件是使用 linkTo() 或其他有用的方法指定的。
        //parent 是一个现有的引用，可用于指定对 ConstraintLayout 可组合项本身的约束条件。
        Icon(Icons.Default.AccountBox,null, modifier = Modifier.layoutId("icon"))
        Text("MainText",modifier = Modifier.layoutId("mainText"))
        Text("SubText",modifier = Modifier.layoutId("subText"))

        Checkbox(checked = checked, onCheckedChange = {
            checked=it
        },modifier = Modifier.layoutId("checkbox"))
    }


}

@Preview
@Composable
fun ConstraintLayoutSample2Preview() {
    ConstraintLayoutSample2()
}

